<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello world</title>
</head>
<body>
<h1></h1>

<img src="img/go_to.png" alt="">
<br>
<button>change user</button>
</body>
<script>
    //		1
    var heading = document.querySelector('h1');
    heading.innerHTML = 'hello world';
    //		变量(variables)、注释、运算符、语句、函数、事件


    //		2 function
    function add(num1, num2) {
        var result = num1 * num2;
        return result;
    }
    //		提示：return 语句告诉浏览器返回 result 变量以便使用。这是很有必要的，因为函数内定义的变量只能在函数内使用。这叫做作用域 scoping
    add(1, 3);

    //		3.点击更换图片
    var myImage=document.querySelector('img');
    myImage.onclick=function(){
        var mySrc=myImage.getAttribute('src');
        if(mySrc==='img/go_to.png'){
            myImage.setAttribute('src','img/edit.png')
        }else{
            myImage.setAttribute('src','img/go_to.png')
        }
    }

    //
    var myButton=document.querySelector('button');

    function setUserName(){
        var myName=prompt('please  enter your name');
        localStorage.setItem('name',myName);
        heading.innerHTML='mdn is cool '+myName;
    }

    if(localStorage.getItem('name')){
        var storeName=localStorage.getItem('name');
        heading.innerHTML='mdn is cool '+storeName;
    }else{
        setUserName();
    }

    myButton.onclick=function(){
        setUserName();
    }


</script>
</html>